{% macro navitem(name, url, icon, new=False, shrink=False, img=None) %}
<li class="nav-item">
  {% if not new %}
  <a class="nav-link" href="{{ url }}">
  {% else %}
  <a class="nav-link" href="{{ url }}" target="_blank">
  {% endif %}
    <span class="d-block" data-toggle="tooltip" data-placement="bottom" title="{{ name }}">
      <!-- {% if img %}
      <img src="{{ img }}" class="nav-icon-img" style="height: 16px;">
      {% else %} -->
      <i class="fas {{ icon }} d-none d-md-block d-lg-none"></i>
      <!-- {% endif %} -->
    </span>
    <span class="d-sm-block d-md-none d-lg-block text-nowrap">
      {% if img %}
      <img src="{{ img }}" class="nav-icon-img" style="height: 16px;">
      {% else %}
      <i class="fas {{ icon }} pr-1"></i>
      {% endif %}

      {% if not shrink %}
      {{ name }}
      {% else %}
      <span class="d-lg-none">{{ name }}</span>
      {% endif %}
    </span>
  </a>
</li>
{% endmacro %}

{% macro card(url, title=None, text=None, icon=None, emoji=None, custom=False) -%}
  <a class="text-decoration-none" href="{{ url }}">
    <li class="card card-small">
      <div class="card-body">
        {% if title %}<h4 class="card-title">{{ title }}</h4>{% endif %}
        {% if text %}<p class="card-text">{{ text }}</p>{% endif %}
        <div class="card-icon">
          {% if icon %}<img src="{{ icon }}">{% endif %}
          {% if emoji %}{{ emoji }}{% endif %}
        </div>
        {% if custom %}{{ caller() }}{% endif %}
      </div>
    </li>
  </a>
{%- endmacro %}

{% macro module_icon(icon=None) %}
  <div class="card-icon">
    {% if icon %}<img src="{{ icon }}">{% endif %}
    {% if emoji %}{{ emoji }}{% endif %}
  </div>
{% endmacro %}

{% macro module_icon_lock(icon=None) %}
  <div class="card-icon">
    {% if icon %}<img src="{{ icon }}" style="filter: brightness(0.05) drop-shadow(0px 0px 6px white);">{% endif %}
    {% if emoji %}{{ emoji }}{% endif %}
  </div>
{% endmacro %}


{% macro accordion_item(accordion_id, item_id) %}
  <div class="accordion-item">
    <div class="accordion-item-header" id="{{ accordion_id }}-header-{{ item_id }}">
      <h2 class="mb-0">
        <button class="btn btn-link text-decoration-none w-100 collapsed" type="button" data-toggle="collapse" data-target="#{{ accordion_id }}-body-{{ item_id }}" aria-expanded="false" aria-controls="{{ accordion_id }}-body-{{ item_id }}">
          {{ caller(True) }}
        </button>
      </h2>
    </div>

    <div id="{{ accordion_id }}-body-{{ item_id }}" class="collapse" aria-labelledby="{{ accordion_id }}-header-{{ item_id }}" data-parent="#{{ accordion_id }}">
      <div class="accordion-item-body">
        {{ caller(False) }}
      </div>
    </div>
  </div>
{% endmacro %}
